<template>
  <div class="onepinglun">
    <div class="card">
      <img :src="img" class="pinglunimg" />
      <p class="text">{{text}}</p>
      <div class="userinformation">
        <div class="user">
          <img :src="userimg" lazy-load />
          <!-- <van-image round :src="userimg" lazy-load /> -->
          <div class="username">{{username}}</div>
        </div>
        <div class="ignore">
          <van-icon name="good-job-o" />
          <div class="num">{{num}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["num", "username", "userimg", "text", "img"]
};
</script>

<style lang="scss" scoped>
.onepinglun {
  width: 47.6vw;
  margin-top: 1.6vw;
  .card {
    position: relative;
    background: #fff;
    box-sizing: border-box;
    border-radius: 1.067vw;
    overflow: hidden;
    box-shadow: 0 0.01rem 0.08rem 0 rgb(0 0 0 / 6%);
    text-decoration: none;
    font-size: 0;
    padding-bottom: 1.6vw;
    .pinglunimg {
      width: 100%;
      display: block;
    }
    .text {
      font-size: 0.26rem;
      color: #222;
      line-height: 5.067vw;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 2.667vw;
      margin-top: 1.6vw;
      box-sizing: border-box;
      font-weight: 500;
      white-space: break-spaces;
    }
    .userinformation {
      display: flex;
      justify-content: space-between;
      margin: 2.667vw 2.667vw 0 2.667vw;
      .user {
        height: 5.333vw;
        img {
          display: inline-block;
          width: 5.067vw;
          height: 5.067vw;
          border: 0.267vw solid #e1e1e1;
          border-radius: 50%;
          box-sizing: border-box;
        }
        .username {
          margin-left: 1.6vw;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 2.667vw;
          height: 5.333vw;
          width: 13.333vw;
          line-height: 5.333vw;
          color: #222;
          overflow: hidden;
          display: inline-block;
        }
      }
      .ignore {
        display: flex;
        align-items: center;
        font-size: 3.733vw;
        ::v-deep .van-icon {
          margin-right: 1.067vw;
        }
        .num {
          color: #222;
          line-height: 3.733vw;
        }
      }
    }
  }
}
</style>